<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心 - 柚聊实时聊天室</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #7eb3b7;
            --secondary-color: #99dbd1;
            --light-color: #fffdf1;
            --card-bg: #cceaf2;
            --dark-color: #333;
            --gray-color: #777;
            --light-gray: #f0f0f0;
            --border-radius: 8px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: 700;
        }
        
        .logo-icon {
            width: 32px;
            height: 32px;
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        .nav-links a:hover, .nav-links a.active {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        /* 主要内容区域 */
        main {
            padding: 3rem 0;
            min-height: calc(100vh - 200px);
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 2.5rem;
            color: var(--primary-color);
            position: relative;
        }
        
        .page-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            margin: 10px auto;
            border-radius: 2px;
        }
        
        /* 卡片样式 */
        .card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        
        .card-title {
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-title i {
            font-size: 1.2rem;
        }
        
        /* FAQ样式 */
        .faq-category {
            margin-bottom: 2rem;
        }
        
        .faq-category h3 {
            color: var(--primary-color);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--secondary-color);
        }
        
        .faq-item {
            margin-bottom: 1rem;
            border: 1px solid var(--secondary-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            background: white;
        }
        
        .faq-question {
            padding: 1rem;
            background: var(--secondary-color);
            color: white;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
        }
        
        .faq-question::after {
            content: '+';
            font-size: 1.2rem;
            transition: var(--transition);
        }
        
        .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }
        
        .faq-answer {
            padding: 0 1rem;
            max-height: 0;
            overflow: hidden;
            transition: var(--transition);
        }
        
        .faq-item.active .faq-answer {
            padding: 1rem;
            max-height: 500px;
        }
        
        /* 联系方式样式 */
        .contact-methods {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .contact-method {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0.8rem 1.2rem;
            background: white;
            border-radius: var(--border-radius);
            transition: var(--transition);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .contact-method:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .contact-icon {
            font-size: 1.5rem;
            color: var(--primary-color);
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--primary-color);
            color: white;
            padding: 2rem 0;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        
        .developer-info {
            font-style: italic;
            margin-top: 1rem;
            color: #e6f7ff;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-links {
                gap: 1rem;
            }
            
            .contact-methods {
                flex-direction: column;
            }
            
            .card {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <span class="logo-icon">
                        <svg t="1762146198299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10957" width="32" height="32">
                            <path d="M897.024 403.456c43.008 22.528 71.68 65.536 71.68 114.688v206.848c0 71.68-59.392 129.024-135.168 129.024h-4.096V962.56L634.88 854.016h-92.16c-30.72 0-61.44-10.24-83.968-28.672L542.72 768H716.8c92.16 0 176.128-67.584 176.128-176.128V403.456h4.096z" fill="#DAE9FF" p-id="10958"></path>
                            <path d="M270.336 720.896h-59.392c-71.68 0-131.072-59.392-131.072-131.072v-337.92c0-71.68 59.392-131.072 131.072-131.072h499.712c71.68 0 131.072 59.392 131.072 131.072v339.968c0 71.68-57.344 131.072-131.072 131.072H532.48" fill="#FFFFFF" p-id="10959"></path>
                            <path d="M245.76 245.76h430.08c22.528 0 40.96 18.432 40.96 40.96v286.72c0 22.528-18.432 40.96-40.96 40.96H245.76c-22.528 0-40.96-18.432-40.96-40.96V286.72c0-22.528 18.432-40.96 40.96-40.96z" fill="#DAE9FF" p-id="10960"></path>
                            <path d="M378.88 389.12c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m143.36 0c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m-133.12 81.92c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48 8.192 20.48 20.48 20.48 20.48-8.192 20.48-20.48 8.192-20.48 20.48-20.48S512 458.752 512 471.04c0 34.816-26.624 61.44-61.44 61.44s-61.44-26.624-61.44-61.44z" fill="#3988FF" p-id="10961"></path>
                            <path d="M710.656 120.832H210.944c-71.68 0-131.072 59.392-131.072 131.072v339.968c0 71.68 59.392 131.072 131.072 131.072h100.352v-61.44h-98.304c-38.912 0-69.632-30.72-69.632-69.632V251.904c0-38.912 30.72-69.632 69.632-69.632h499.712c38.912 0 69.632 30.72 69.632 69.632v339.968c0 38.912-30.72 69.632-69.632 69.632h-194.56l-157.696 102.4-36.864 24.576 32.768 49.152L532.48 722.944h178.176c71.68 0 131.072-59.392 131.072-131.072V251.904c0-71.68-59.392-131.072-131.072-131.072z" fill="#3889FF" p-id="10962"></path>
                        </svg>
                    </span>
                    <span>柚聊</span>
                </div>
                <div class="nav-links">
                    <a href="login.html" class="nav-link">登录</a>
                    <a href="register.html" class="nav-link">注册</a>
                    <a href="about.html" class="nav-link">关于我们</a>
                    <a href="help.html" class="nav-link active">帮助中心</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main>
        <div class="container">
            <h1 class="page-title">帮助中心 - 柚聊使用全攻略</h1>
            
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-question-circle"></i> 常见问题 (FAQ)
                </h2>
                
                <div class="faq-category">
                    <h3>账户管理</h3>
                    
                    <div class="faq-item">
                        <div class="faq-question">如何注册一个新账号？</div>
                        <div class="faq-answer">
                            <p>点击登录页面的"注册"按钮，按照提示填写您的用户名、邮箱和设置密码即可完成注册。</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">我忘记密码了怎么办？</div>
                        <div class="faq-answer">
                            <p>在登录页面点击"忘记密码"，输入您注册时使用的邮箱地址。系统会向该邮箱发送一封包含密码重置链接的邮件，请按邮件指引操作即可。</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">如何确保我的账号安全？</div>
                        <div class="faq-answer">
                            <p>请使用强度较高的密码（包含字母、数字和符号），并不要将您的密码告知他人。</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-category">
                    <h3>好友功能</h3>
                    
                    <div class="faq-item">
                        <div class="faq-question">如何添加好友？</div>
                        <div class="faq-answer">
                            <p>在应用主界面找到"添加好友"或搜索图标，输入您要添加的好友的用户名或注册邮箱，发送添加请求。待对方同意后，你们即可成为好友并开始聊天。</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">我收到了好友请求在哪里查看？</div>
                        <div class="faq-answer">
                            <p>当有新的好友请求时，系统通常会通过通知图标（如小红点）提醒您。请点击"好友申请"或类似入口查看并处理请求。</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-category">
                    <h3>聊天与消息</h3>
                    
                    <div class="faq-item">
                        <div class="faq-question">如何与好友开始聊天？</div>
                        <div class="faq-answer">
                            <p>在您的好友列表中，直接点击对应好友的头像或名称，即可进入一对一的聊天窗口。</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">我可以发送图片和文件吗？</div>
                        <div class="faq-answer">
                            <p>当然可以。在聊天输入框的上方或旁边，找到"图片"或"文件"附件图标，点击后选择您设备中的文件即可上传并发送。请注意文件大小限制。</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">表情包功能在哪里？</div>
                        <div class="faq-answer">
                            <p>在聊天输入框附近，通常有一个笑脸 😊 图标，点击即可打开表情包面板，选择您喜欢的表情发送。</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-category">
                    <h3>技术问题</h3>
                    
                    <div class="faq-item">
                        <div class="faq-question">消息发送失败或延迟怎么办？</div>
                        <div class="faq-answer">
                            <p>请首先检查您的网络连接是否稳定。如果问题持续，请尝试刷新页面或重新登录。若仍无法解决，请联系我们的技术支持。</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">为什么我收不到好友的消息？</div>
                        <div class="faq-answer">
                            <p>请确认您已成功连接到互联网。同时，检查是否意外关闭了浏览器的通知权限。确保您的应用保持在最新状态。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-headset"></i> 联系我们
                </h2>
                <p>如果您在此未找到您问题的答案，或者遇到了特殊的技术故障，欢迎您直接通过邮件与我们取得联系。请详细描述您遇到的问题，我们将尽快为您排查解决。</p>
                
                <div class="contact-methods">
                    <div class="contact-method">
                        <span class="contact-icon"><i class="fas fa-tools"></i></span>
                        <span>技术支持邮箱: 2029889073@qq.com</span>
                    </div>
                    <div class="contact-method">
                        <span class="contact-icon"><i class="fas fa-handshake"></i></span>
                        <span>项目合作邮箱: Liu_MengMeng@yeah.net</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <p>&copy; 2025 柚聊 - 实时聊天室项目 | 开发者: 橘柚</p>
                <p class="developer-info">联系方式: 微信 lmm2029889073 | QQ邮件 2029889073@qq.com | 网易邮箱 Liu_MengMeng@yeah.net</p>
            </div>
        </div>
    </footer>

    <script>
        // FAQ折叠功能
        document.addEventListener('DOMContentLoaded', function() {
            const faqItems = document.querySelectorAll('.faq-item');
            faqItems.forEach(item => {
                const question = item.querySelector('.faq-question');
                question.addEventListener('click', () => {
                    // 关闭其他打开的FAQ
                    faqItems.forEach(otherItem => {
                        if (otherItem !== item && otherItem.classList.contains('active')) {
                            otherItem.classList.remove('active');
                        }
                    });
                    
                    // 切换当前FAQ状态
                    item.classList.toggle('active');
                });
            });
        });
    </script>
</body>
</html>